<template>
  <div class="panel">
    <panel-title title="修改/新增预警"></panel-title>
    <div class="panel-body">
      <el-form :model="formData"
               ref="ruleForm"
               label-width="100px"
               class="demo-ruleForm"
               :rules="warningRules"
      >
        <el-form-item label="规则名称"
                      prop="ruleName"
        >
          <el-input
            v-model="formData.ruleName"
            label-width="100px"
            class="inputClass"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="规则描述"
          prop="description"
        >
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="formData.description"
            label-width="100px"
            class="inputClass"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="情感倾向"
          prop="sentiment"
        >
          <el-radio-group v-model="formData.sentiment">
            <el-radio-button label="0">负面</el-radio-button>
            <el-radio-button label="1">中立</el-radio-button>
            <el-radio-button label="2">正面</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="舆情类型"
          prop="types"
          :rules="{required: true, message: '请选择舆情类型', trigger: 'blur'}"
          class="formItem"
        >
          <el-select
            v-model="formData.types"
            multiple
            placeholder="请选择"
            class="inputClass"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="预警门槛"
          prop="hotIndex"
        >
          <el-input-number
            v-model="formData.hotIndex"
            style="width: 260px"
            :step=100
            :min="0">
          </el-input-number>
        </el-form-item>
        <div v-for="(email,index) in formData.emails" :key="index">
          <el-form-item :label="'预警邮箱'+(index+1)"
                        :key="email.key"
                        :prop="'emails.' + index + '.email'"
                        :rules="[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                        ]"
          >
            <el-input v-model="email.email" class="inputClass"></el-input>
            <el-button type="success" icon="el-icon-plus" circle @click="addEmail()"></el-button>
            <el-button type="danger" icon="el-icon-minus" circle v-if="formData.emails.length>1"
                       @click="removeEmail(index)"></el-button>
          </el-form-item>
        </div>
        <el-form-item label="是否自动运行">
          <template>
            <el-radio v-model="formData.autoRun" :label="1">是</el-radio>
            <el-radio v-model="formData.autoRun" :label="0">否</el-radio>
          </template>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="validateFrom('ruleForm')">保存</el-button>
          <el-button @click="cancelRule()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>
<script>
  import {panelTitle} from 'components'
  import {userUtil} from 'common/tools'

  export default {
    data() {
      return {
        formData: {
          id: null,
          ruleName: null,
          description: null,
          sentiment: null,
          types: [],
          hotIndex: 2000,
          autoRun: null,
          emails: [{key: '', email: ''}],
        },
        typeOptions: [{
          value: '国际',
          label: '国际'
        }, {
          value: '体育',
          label: '体育'
        }, {
          value: '娱乐',
          label: '娱乐'
        }, {
          value: '社会',
          label: '社会'
        }, {
          value: '财经',
          label: '财经'
        }, {
          value: '时事',
          label: '时事'
        }, {
          value: '科技',
          label: '科技'
        }, {
          value: '情感',
          label: '情感'
        }, {
          value: '汽车',
          label: '汽车'
        }, {
          value: '教育',
          label: '教育'
        }, {
          value: '时尚',
          label: '时尚'
        }, {
          value: '游戏',
          label: '游戏'
        }, {
          value: '军事',
          label: '军事'
        }, {
          value: '旅游',
          label: '旅游'
        }, {
          value: '美食',
          label: '美食'
        }, {
          value: '文化',
          label: '文化'
        }, {
          value: '健康养生',
          label: '健康养生'
        }, {
          value: '搞笑',
          label: '搞笑'
        }, {
          value: '家居',
          label: '家居'
        }, {
          value: '动漫',
          label: '动漫'
        }, {
          value: '宠物',
          label: '宠物'
        }, {
          value: '母婴育儿',
          label: '母婴育儿'
        }, {
          value: '星座运势',
          label: '星座运势'
        }, {
          value: '历史',
          label: '历史'
        }, {
          value: '音乐',
          label: '音乐'
        }, {
          value: '综合',
          label: '综合'
        }],
        warningRules: {
          ruleName: {required: true, message: '请输入规则名称', trigger: 'blur'},
          description: {required: true, message: '请输入规则描述', trigger: 'blur'},
          sentiment: {required: true, message: '请选择情感倾向', trigger: 'blur'},
          hotIndex: [{required: true, message: '预警门槛不能为空'},
            {type: 'number', message: '预警门槛必须为数字值'}],

        },
      }
    },
    components: {
      panelTitle
    },
    created() {
      var id = this.$route.params.id
      if (id != null) {
        //获取数据
        this.getWaringRuleById(id)
      }

    },
    computed: {
      emailString: function () {
        let emailString = "";
        let len = this.formData.emails.length;
        for (let i = 0; i < len - 1; i++) {
          emailString += this.formData.emails[i].email + ","
        }
        emailString += this.formData.emails[len - 1].email
        return emailString
      },
      typeString: function () {
        return String(this.formData.types)
      }
    },
    methods: {
      addEmail() {
        this.formData.emails.push({
          email: '',
          key: Date.now()
        })
      },
      removeEmail(index) {
        if (index >= -1 && this.formData.emails.length > 1) {
          this.formData.emails.splice(index, 1)
        }
      },
      validateFrom(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitWaringRule();
          } else {
            return false;
          }
        });
      },
      cancelRule() {
        this.$router.push({name: 'warning'})
      },
      submitWaringRule() {
        console.log(this.formData)
        if (this.formData.id != null) {
          //修改操作
          this.$fetch.apiWarning.addWaringRule({
            id: this.formData.id,
            ruleName: this.formData.ruleName,
            description: this.formData.description,
            sentiment: this.formData.sentiment,
            type: this.typeString,
            hotIndex: this.formData.hotIndex,
            email: this.emailString,
            autoRun: this.formData.autoRun
          }).then(({data: data}) => {
            if (data == 1) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.$router.push({name: 'warning'})
            } else {
              this.$message.error('修改失败');
            }
          })
        } else {
          var loginInfo = userUtil.getLoginInfo();
          //保存操作
          this.$fetch.apiWarning.addWaringRule({
            ruleName: this.formData.ruleName,
            description: this.formData.description,
            sentiment: this.formData.sentiment,
            type: this.typeString,
            hotIndex: this.formData.hotIndex,
            email: this.emailString,
            autoRun: this.formData.autoRun
          }).then(({data: data}) => {
            if (data == 1) {
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              this.$router.push({name: 'warning'})
            } else {
              this.$message.error('新增失败');
            }
          })
        }
      },
      getWaringRuleById(id) {
        this.$fetch.apiWarning.getWaringRuleById({
          id: id,
        }).then(({data: data}) => {
          this.formData.id = data.id
          this.formData.ruleName = data.ruleName
          this.formData.description = data.description
          this.formData.sentiment = data.sentiment
          this.formData.types = data.type.split(',')
          this.formData.hotIndex = data.hotIndex
          this.formData.autoRun = data.autoRun
          let emails = data.email.split(",")
          this.formData.emails = []
          for (let i = 0; i < emails.length; i++) {
            this.formData.emails.push({
              key: Date.now(),
              email: emails[i]
            })
          }
          if (this.formData.emails.length <= 0) {
            this.formData.emails.push({
              key: Date.now(),
              email: ""
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .inputClass {
    width: 400px;
  }

  .el-tag {
    color: #65cea7;
  }

  .formItem {
    .el-select .el-tag {
      background-color: #28ccaa;
      color: #fff;
    }
  }
</style>
